<style lang="less">
@import "../../styles/common.less";
@import "./access.less";
.ivu-card-head i {
  vertical-align: middle;
}
</style>

<template>
    <div class="access">
        <Modal
            v-model="showModal"
            :title="`${mode}用户`"
            :ok-text="mode"
            :loading="submitting"
            @on-ok="handleSubmit"
        >
            <Form :model="formItem" :label-width="80" :rules="formRule" ref="form">
                <FormItem label="用户名: " prop="username">
                    <Input v-model="formItem.username" style="width: calc(100% - 40px)"></Input>
                </FormItem>
                <FormItem label="密码: " prop="password" v-show="mode==='编辑'">
                    <Input type="password" v-model="formItem.password" style="width: calc(100% - 40px)"></Input>
                </FormItem>
                <FormItem label="手机: " prop="phoneNum">
                    <Input v-model="formItem.phoneNum" style="width: calc(100% - 40px)"></Input>
                </FormItem>
                <FormItem label="姓名: " prop="realname">
                    <Input v-model="formItem.realname" style="width: calc(100% - 40px)"></Input>
                </FormItem>
                <FormItem label="部门: " prop="department">
                    <Select v-model="formItem.department" style="width: calc(100% - 40px)">
                        <Option v-for="item in departmentList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="角色: " prop="role">
                    <Select v-model="formItem.role" style="width: calc(100% - 40px)">
                        <Option v-for="item in roleList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
            </Form>
        </Modal>
        <Row>
            <Col span="24">
                <Card>
                    <div slot="title" style="display: flex; justify-content: space-between;">
                        <div style="line-height: 32px;">
                            <Icon type="ios-person" size="22" style="margin-right: 12px;"></Icon>用户管理
                        </div>
                        <div>
                            <Tooltip content="新增">
                                <Button type="primary" @click="addUser" style=" margin-left: 8px"><Icon type="plus"></Icon> </Button>
                            </Tooltip>
                            <Tooltip content="下载">
                                <Button type="primary" @click=""><Icon type="ios-download"></Icon> </Button>
                            </Tooltip>
                        </div>
                    </div>
                    <div style="min-height: 200px">
                        <Table :columns="userColumns" :data="userData" size="small" ref="eventtable"></Table>
                    </div>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
import { userData, generateUserColumns } from "./data/user.js";

export default {
  name: "access_user",
  data() {
    return {
      showModal: false,
      submitting: true,
      mode: "新增",
      userData,
      userColumns: [],
      departmentList: [
        { value: 0, label: "测试部门1" },
        { value: 1, label: "测试部门2" }
      ],
      roleList: [
        { value: 0, label: "管理员" },
        { value: 1, label: "一般运维人员" }
      ],
      formItem: {
        username: "",
        password: "",
        phoneNum: "",
        realname: "",
        department: "",
        role: ""
      },
      formRule: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        phoneNum: [
          { required: true, message: "请输入手机号", trigger: "blur" }
        ],
        department: [
          { required: true, message: "请选择部门", trigger: "blur" }
        ],
        role: [{ required: true, message: "请选择角色", trigger: "blur" }]
      }
    };
  },
  computed: {},
  mounted() {
    this.userColumns = generateUserColumns(this.editUser, this.deleteUser);
  },
  methods: {
    handleSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$Message.success(`${this.mode}成功!`);
        } else {
          this.$Message.error(`${this.mode}失败!`);
          setTimeout(() => {
            this.submitting = false;
          }, 1000);
        }
      });
    },
    addUser() {
      this.formItem = {
        username: "",
        password: "",
        phoneNum: "",
        realname: "",
        department: "",
        role: ""
      };
      this.showModal = true;
      this.mode = "新增";
    },
    editUser(row) {
      this.formItem = {
        username: row.username,
        password: row.password,
        phoneNum: row.phoneNum,
        realname: row.realname,
        department: row.department,
        role: row.role
      };
      this.showModal = true;
      this.mode = "修改";
    },
    deleteUser(row) {
      this.$Modal.confirm({
        title: "删除用户",
        content: `确定删除用户 <strong>${row.username}？</strong>`,
        onOk: () => {}
      });
    }
  }
};
</script>

<style>

</style>
